<template>
    <div class="attribute-text main-panel-wrap-b">
        <!-- <div class="main-panel-title">
            <span>文本</span>
        </div> -->
        <div class="main-panel-content-wrap">
            <div class="row-1" v-if="currentElementList[0].component !== 'Menu'">
                <div class="main-text-tran-50">字体大小</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="text.getFontSizeName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="text.setFontSizeValue(currentElementList[0], JQuery('#' + text.getFontSizeName()).val(), false)" @change="history.addHistory(store.clone(), 130)" />
                    </div>
                </div>
            </div>
            <div class="row-2" v-if="currentElementList[0].component !== 'Menu'">
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="label-icon">
                        <el-tooltip effect="dark" placement="bottom">
                            <div slot="content">行高</div>
                            <img src="../../../image/main/text_row.svg">
                        </el-tooltip>
                    </div>
                    <div class="mas-basic-layout">
                        <input :id="text.getLineHeightName()" :min="0" type="number" class="mas-basis-input mas-input-top" @input="text.setLineHeightValue(currentElementList[0], JQuery('#' + text.getLineHeightName()).val(), false)" @change="history.addHistory(store.clone(), 131)" />
                    </div>
                </div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="label-icon">
                        <el-tooltip effect="dark" placement="bottom">
                            <div slot="content">字间距</div>
                            <img src="../../../image/main/text_spacing.svg">
                        </el-tooltip>
                    </div>
                    <div class="mas-basic-layout">
                        <input :id="text.getLetterSpacingName()" :min="0" type="number" class="mas-basis-input mas-input-top" @input="text.setLetterSpacing(currentElementList[0], JQuery('#' + text.getLetterSpacingName()).val(), false)" @change="history.addHistory(store.clone(), 132)" />
                    </div>
                </div>
            </div>
            <div class="row-2">
                <div class="main-mas-input-simple">
                    <div class="mas-basic-layout">
                        <el-color-picker v-model="currentElementList[0].style.color" @change="text.setStyleColor(currentElementList[0], $event); history.addHistory(store.clone(), 137)" class="main-cover-color-picker" size="mini" show-alpha></el-color-picker>
                    </div>
                </div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <select :id="text.getFontWeightName()" class="main-mas-basis-select" @change="text.setFontWeight(currentElementList[0], JQuery('#' + text.getFontWeightName()).val(), false); history.addHistory(store.clone(), 133)">
                            <option value="100">100</option>
                            <option value="200">200</option>
                            <option value="300">300</option>
                            <option value="400">400</option>
                            <option value="500">500</option>
                            <option value="600">600</option>
                            <option value="700">700</option>
                            <option value="800">800</option>
                            <option value="900">900</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row-1">
                <div class="main-text-tran-50">字体选择</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <select :id="text.getFontFamilyName()" class="main-mas-basis-select" @change="text.setFontFamilyValue(currentElementList[0], JQuery('#' + text.getFontFamilyName()).val(), false); history.addHistory(store.clone(), 183)">
                            <option v-for="(item, index) in fontList" :key="index" :value="item.value">{{ item.name }}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row-2" v-if="currentElementList[0].component !== 'Menu' && currentElementList[0].component !== 'CarouselText' && currentElementList[0].component !== 'Decoration'">
                <div class="main-mas-input-simple">
                    <div class="label-icon cur-pointer" :class="{ 'cur-pointer-selcted': currentElementList[0].style.textAlign === 'left'}" @click="text.setTextAlign(currentElementList[0], 'left'); history.addHistory(store.clone(), 134)">
                        <el-tooltip effect="dark" placement="bottom">
                            <div slot="content">左对齐</div>
                            <img src="../../../image/main/text_position_l.svg">
                        </el-tooltip>
                    </div>
                    <div class="label-icon cur-pointer" :class="{ 'cur-pointer-selcted': currentElementList[0].style.textAlign === 'center'}" @click="text.setTextAlign(currentElementList[0], 'center'); history.addHistory(store.clone(), 134)">
                        <el-tooltip effect="dark" placement="bottom">
                            <div slot="content">居中</div>
                            <img src="../../../image/main/text_position_c.svg">
                        </el-tooltip>
                    </div>
                    <div class="label-icon cur-pointer" :class="{ 'cur-pointer-selcted': currentElementList[0].style.textAlign === 'right'}" @click="text.setTextAlign(currentElementList[0], 'right'); history.addHistory(store.clone(), 134)">
                        <el-tooltip effect="dark" placement="bottom">
                            <div slot="content">右对齐</div>
                            <img src="../../../image/main/text_position_r.svg">
                        </el-tooltip>
                    </div>
                </div>
                <div class="main-mas-input-simple">
                    <div class="label-icon cur-pointer" :class="{ 'cur-pointer-selcted': currentElementList[0].style.verticalAlign === 'top'}" @click="text.setVerticalAlign(currentElementList[0], 'top'); history.addHistory(store.clone(), 135)">
                        <el-tooltip effect="dark" placement="bottom">
                            <div slot="content">上对齐</div>
                            <img src="../../../image/main/text_position_t.svg">
                        </el-tooltip>
                    </div>
                    <div class="label-icon cur-pointer" :class="{ 'cur-pointer-selcted': currentElementList[0].style.verticalAlign === 'middle'}" @click="text.setVerticalAlign(currentElementList[0], 'middle'); history.addHistory(store.clone(), 135)">
                        <el-tooltip effect="dark" placement="bottom">
                            <div slot="content">居中</div>
                            <img src="../../../image/main/text_position_v.svg">
                        </el-tooltip>
                    </div>
                    <div class="label-icon cur-pointer" :class="{ 'cur-pointer-selcted': currentElementList[0].style.verticalAlign === 'bottom'}" @click="text.setVerticalAlign(currentElementList[0], 'bottom'); history.addHistory(store.clone(), 135)">
                        <el-tooltip effect="dark" placement="bottom">
                            <div slot="content">下对齐</div>
                            <img src="../../../image/main/text_position_b.svg">
                        </el-tooltip>
                    </div>
                </div>
            </div>
            <div class="text-input-c" v-if="currentElementList[0].component !== 'Menu'">
                <div class="mas-basic-layout">
                    <textarea :id="text.getTextName()" rows="3" placeholder="编辑文本内容" class="main-mas-basis-textarea" @input="text.setText(currentElementList[0], JQuery('#' + text.getTextName()).val(), false)" @change="history.addHistory(store.clone(), 136)" />
                </div>
            </div>
            <div class="main-panel-title main-panel-title-shadow">
                <span>阴影效果</span>
                <el-switch v-model="currentElementList[0].style.textShadow.visible" active-text="" inactive-text="" class="review-switch"></el-switch>
            </div>
            <div class="main-panel-content-wrap">
                <div class="row-1">
                    <div class="main-text-tran-50">水平阴影</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="text.getTextShadowLevelName()" type="number" class="mas-basis-input mas-basis-input2" @input="text.setTextShadowLevel(currentElementList[0], JQuery('#' + text.getTextShadowLevelName()).val(), false)" @change="history.addHistory(store.clone(), 184);$store.commit('setHistoryValue', { type: 'style.textShadow.level', element: currentElementList[0], id: text.getTextShadowLevelName() })" />
                        </div>
                    </div>
                </div>
                <div class="row-1">
                    <div class="main-text-tran-50">垂直阴影</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="text.getTextShadowVerticalName()" type="number" class="mas-basis-input mas-basis-input2" @input="text.setTextVertical(currentElementList[0], JQuery('#' + text.getTextShadowVerticalName()).val(), false)" @change="history.addHistory(store.clone(), 185);$store.commit('setHistoryValue', { type: 'style.textShadow.vertical', element: currentElementList[0], id: text.getTextShadowVerticalName() })" />
                        </div>
                    </div>
                </div>
                <div class="row-1">
                    <div class="main-text-tran-50">模糊距离</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="text.getTextShadowBlurName()" type="number" class="mas-basis-input mas-basis-input2" @input="text.setTextShadowBlur(currentElementList[0], JQuery('#' + text.getTextShadowBlurName()).val(), false)" @change="history.addHistory(store.clone(), 186);$store.commit('setHistoryValue', { type: 'style.textShadow.blur', element: currentElementList[0], id: text.getTextShadowBlurName() })" />
                        </div>
                    </div>
                </div>
                <div class="row-1">
                    <div class="main-text-tran-50">阴影颜色</div>
                    <div class="main-mas-input-simple main-long-content-color">
                        <div class="mas-basic-layout">
                            <el-color-picker ref="textShadowColorPicker" v-model="textShadowColor" @change="text.setTextShadowColor(currentElementList[0], $event);history.addHistory(store.clone(), 187);" size="mini" show-alpha></el-color-picker>
                        </div>
                        <div class="main-long-content-label" @click="$refs['textShadowColorPicker'].showPicker = true">{{ currentElementList[0].style.textShadow.color }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import text from '@/js/main/attribute/text.js';
import store from '@/js/store/state.js';
import JQuery from 'jquery';
import history from '@/js/main/history.js';
import util from '@/js/util/util.js';
import { mapGetters } from "vuex";

export default {
    name: 'VTextAttr',
    data() {
        return {
            JQuery: JQuery,
            window: window,
            history: history,
            store: store,
            text: text,
            currentElementList: store.getCurrentElementList()
        };
    },
    computed: {
        ...mapGetters(["fontList"]),
        textShadowColor: {
            get: function () {
                if (!this.currentElementList[0].style.textShadow) {
                    this.$set(this.currentElementList[0].style, 'textShadow', {
                        visible: false,
                        level: 0,
                        vertical: 0,
                        blur: 0,
                        color: '#FFFFFFFF'
                    });
                }
                return this.currentElementList[0].style.textShadow.color;
            },
            set: function (color) {
                this.currentElementList[0].style.textShadow.color = util.rgbaToHexColor(color);
            }
        },
    },
    mounted() {
        text.setAttribute(this.currentElementList[0]);
    }
};
</script>

<style lang="scss" scoped>
.attribute-text {
    .row-1 {
        height: 30px;
        width: 100%;
        display: grid;
        grid-gap: 6px;
        align-items: center;
        font-weight: 600;
        cursor: auto;
        grid-template-columns: 60px 1fr 30px;
    }
    .row-2 {
        height: 30px;
        display: grid;
        column-gap: 6px;
        grid-template-columns: 1fr 1fr 30px;
    }
    .mas-input-top {
        position: relative;
        top: -1px;
    }
    .cur-pointer {
        height: calc(100% - 6px);
        border-radius: 6px;
        &:hover {
            background-color: #ffffff26;
        }
        cursor: pointer;
    }
    .cur-pointer-selcted {
        background-color: #ffffff26;
    }
    .text-input-c {
        background-color: #ffffff0f;
        border-radius: 6px;
        margin-right: 36px;
    }
    .bg-no {
        background: none;
    }
    .main-panel-title-shadow {
        justify-content: space-between;
        margin-right: 36px;
    }
}
</style>